<script setup lang="ts">
defineOptions({name: 'RoleSearch'})
import {useI18n} from 'vue-i18n'

const {t} = useI18n()

interface Props {
	enumData?: Record<string, any>
	languageData?: Record<string, any>
}

interface Emits {
	(e: 'search', params: Record<string, any>): void

	(e: 'reset', params: Record<string, any>): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const searchFormRef = ref()
const searchFormItems = ref<any>([
	{
		key: 'name', type: 'input',
		placeholder: t('common.inputPlaceholder'),
		precisionAndAmbiguity: ['name', 'nameLike'],
	},
	{key: 'status', type: 'select', placeholder: t('common.selectPlaceholder'), clearable: true},
	{
		label: t('common.field.createTime'), key: 'createTimeBetween', type: 'datetime', clearable: true,
		toTimestamp: true,
		props: {
			type: 'datetimerange',
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rangeSeparator: t('common.dateTimeRange.separator'),
			startPlaceholder: t('common.dateTimeRange.start'),
			endPlaceholder: t('common.dateTimeRange.end')
		}
	},
	{
		label: t('common.field.updateTime'), key: 'updateTimeBetween', type: 'datetime', clearable: true,
		toTimestamp: true,
		props: {
			type: 'datetimerange',
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
			rangeSeparator: t('common.dateTimeRange.separator'),
			startPlaceholder: t('common.dateTimeRange.start'),
			endPlaceholder: t('common.dateTimeRange.end')
		}
	},
])

watch(() => props.enumData, (newVal: any) => {
	if (newVal.role) searchFormItems.value[1].options = newVal.role.status
}, {immediate: true});

watch(() => props.languageData, (newVal: any) => {
	if (newVal.role) {
		searchFormItems.value[0].label = newVal.role.field.name;
		searchFormItems.value[0].placeholder = searchFormItems.value[0].placeholder + newVal.role.field.name;
		searchFormItems.value[1].label = newVal.role.field.status;
		searchFormItems.value[1].placeholder = searchFormItems.value[1].placeholder + newVal.role.field.status;
	}
}, {immediate: true});

/**
 * 处理重置
 * @param filterData
 */
const handleReset = (filterData: any) => emit('reset', filterData)

/**
 * 处理搜索
 * @param filterData
 */
const handleSearch = (filterData: any) => emit('search', filterData)
</script>

<template>
	<ArtSearchBar ref="searchFormRef" :items="searchFormItems" @reset="handleReset" @search="handleSearch"/>
</template>

<style scoped lang="scss">

</style>